<template>
  <el-table :data="tableData">
    <!-- <el-table-column prop="img" label="图片" /> -->
    <el-table-column label="图片">
      <template #default="scope">
        <img :src="scope.row.img" style="width: 200px" />
      </template>
    </el-table-column>
    <el-table-column prop="link" label="链接" width="120" />
    <el-table-column prop="alt" label="alt" width="120" />
    <el-table-column label="操作">
      <template #default="scope">
        <!-- <el-button type="danger" @click="remove(scope.row.bannerid)"
          >删除</el-button
        > -->
        <el-popconfirm
          title="Are you sure to delete this?"
          @confirm="remove(scope.row.bannerid)"
        >
          <template #reference>
            <el-button type="danger">Delete</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { bannerListApi, bannerRemoveApi } from "@/api/banner";
import { ElMessage } from "element-plus";

const tableData = ref([]);

const getData = async () => {
  const res: any = await bannerListApi();
  if (res) {
    tableData.value = res.data;
  }
};

onMounted(() => {
  getData();
});

const remove = async (id: string) => {
  // console.log(id);
  const res = await bannerRemoveApi({ bannerid: id });
  if (res) {
    ElMessage.success("轮播图新增成功");
    getData();
  }
};
</script>
